<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/special/imageview.css" />
		<style type="text/css">
			.mui-bar-nav {
				border-bottom: 1px solid #eee
			}
			
			.mui-bar-nav~.mui-content {
				padding-bottom: 40px;
			}
			
			.score>div {
				display: inline-block;
				width: 18px;
				height: 18px;
				background-image: url(../../images/liveblack.png);
				background-repeat: no-repeat;
				background-size: contain;
				vertical-align: middle;
				margin-left: 8px;
			}
			
			.score>.check {
				background-image: url(../../images/liveCheck.png);
			}
			
			.score_title {
				height: 40px;
				line-height: 40px;
				background: #fff;
				padding: 0 14px;
				border-bottom: 1px solid #eee;
			}
			
			.score_title>div {
				display: inline-block;
				margin-right: 14px;
			}
			
			.comment_text textarea {
				border: none;
				font-size: 12px;
				margin: 0;
				vertical-align: middle;
			}
			
			.mui-switch {
				height: 24px;
				background: #ccc;
				width: 56px;
				border: 1px solid #ccc;
			}
			
			.mui-switch .mui-switch-handle {
				height: 18px;
				width: 18px;
				top: 1px;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background: #ccc;
			}
			
			.comment_upImg {
				padding: 4px 14px;
				font-size: 12px;
			}
			
			.comment_upImg_main {
				margin-top: 4px;
				overflow: hidden;
			}
			
			.comment_upImg_main>div {
				float: left;
				width: calc(100vw / 4);
				height: calc(100vw / 4);
				margin: 0 4% 4% 0;
				background-image: url(../../images/noimg.jpg);
				background-size: cover;
				border-radius: 8px;
				background-repeat: no-repeat;
			}
			
			.comment_upImg_main>.addimg {
				background-image: url(../../images/add.png);
			}
			
			.submit {
				position: fixed;
				top: calc(100vh - 40px);
				height: 40px;
				width: 100%;
				z-index: 1000;
			}
			
			.submit button {
				width: 100%;
				height: 100%;
				border-radius: 0;
				background: #da2332;
				border-color: #da2332;
			}
			
			.coverImg {
				width: 100%;
				height: 100%;
				opacity: 0;
			}
			
			.img_trash {
				position: absolute;
				z-index: 99;
				top: 0;
				right: 0;
				color: white;
				padding: 10px;
				background: rgba(0, 0, 0, 0.4);
			}
		</style>
	</head>

	<body>
		<div id="comment">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">发表评论</h1>
			</header>
			<div class="mui-content">
				<div class="score_title">
					<div>商品评分</div>
					<div class="score">
						<div v-for="(live,index) in live" :class="{check :check>=index+1}" @tap="addLive(index)">

						</div>
					</div>
				</div>
				<div class="comment_text">
					<textarea v-model="val" rows="6" placeholder="宝贝是否满足了你的期待？说说你的使用心得分享给其他想购买的朋友吧！"></textarea>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span>匿名评价</span>
						<div class="mui-switch mui-switch-blue mui-switch-mini">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
				<div class="comment_upImg">
					<div class="comment_upImg_title">上传图片(最多9张)</div>
					<div class="comment_upImg_main">

						<div class="phosGrid" v-for="photos in photos" :style="{backgroundImage : 'url(' + photos + ')'}">
							<img class="coverImg" :src='photos' v-bind:data-preview-src="photos" data-preview-group="1" />
						</div>
						<div class="addimg" v-show="photos.length<9" @tap="selectCls"></div>
					</div>
				</div>
			</div>
			<div class="submit">
				<button type="button" class="mui-btn mui-btn-danger" @tap="submitComment">提交</button>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage_cjh.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({})
			mui.previewImage();
			var comments = new Vue({
				el: '#comment',
				data: {
					imgCommonUrl: common.imageUrl,
					live: ['', '', '', '', ''],
					check: 0,
					photos: [],
					val: '',
					filesZip: [],
					data: ''
				},
				methods: {
					addLive: function(index) {
						this.check = index + 1
					},
					selectCls: function() {
						var btnArray = [{
							title: "立即拍照"
						}, {
							title: "从相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "选择照片",
							cancel: "取消",
							buttons: btnArray
						}, function(e) {
							var index = e.index;
							switch(index) {
								case 1:
									getImage()
									break;
								case 2:
									galleryImg()
									break;
							}
						});
					},
					submitComment: function() {
						if(comments.check <= 0) {
							common.toast('评分不能为0')
							return
						} else if(common.replace(comments.val) == '') {
							common.toast('评论不能为空')
							return
						}

						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(common.urls + "/userCenter/comments/save", {
								method: "POST"
							},
							function(t, status) { //上传完成
								if(status == 200) {
									if(JSON.parse(t.responseText).code == 1) {
										wt.close();
										mui.back()
										if(plus.webview.getWebviewById('../comment/myComment.html')) {
											plus.webview.getWebviewById('../comment/myComment.html').reload()
										}

										var list = plus.webview.getWebviewById('../my/myintegral.html')
										mui.fire(list, 'myintegral');

										var list = plus.webview.getWebviewById('../my/order.html')
										mui.fire(list, 'order');
									} else {
										wt.close();
										if(JSON.parse(t.responseText).resultMsg) {
											common.toast(JSON.parse(t.responseText).resultMsg)
										}
									}
								} else {
									console.log("上传失败：" + status);
									wt.close();
								}
							});

						task.addData("prodScore", comments.check.toString());
						task.addData("isAnonymous", $(".mui-switch-mini").hasClass('mui-active'));
						task.addData("content", comments.val);
						task.addData("prodId", comments.data.prodId.toString());
						task.addData("subItemId", comments.data.subItemId.toString());

						task.addData("shopScore", '5');
						task.addData("logisticsScore", '5');

						task.setRequestHeader('auth', "YL " + common.data.token);
						for(var i = 0; i < comments.filesZip.length; i++) {
							var f = comments.filesZip[i];
							task.addFile(f.path, {
								key: f.name,
								mime: 'form-data'
							});
						}
						task.start();
					}
				},
				watch: {
					photos: function(news, old) {
						this.filesZip = []
						for(var i = 0; i < news.length; i++) {
							compressImage(news[i], i)
						}

					}
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				comments.data = self.parameter;
				var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
				$(".submit").css('top', resizeHeight - 40)
			});

			function getImage() {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var s = entry.toLocalURL()
						comments.photos.push(s)
					}, function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log(JSON.stringify(s))
					//					common.toast('请检查该app相机授权')
				}, {
					filename: "_doc/" + new Date().getTime() + ".jpg"
				})
			}

			function galleryImg() {
				// 从相册中选择图片
				plus.gallery.pick(function(e) {
					comments.photos = comments.photos.concat(e.files)
				}, function(e) {
					common.toast('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					maximum: 9 - Number(comments.photos.length),
					system: false,
					onmaxed: function() {
						plus.nativeUI.alert('最多只能选择' + (9 - Number(comments.photos.length)) + '张图片');
					}
				}); // 最多选择9张图片
			};

			//放大删除
			var imgTrash = document.getElementsByClassName('img_trash')[0];
			imgTrash.addEventListener('tap', function(event) {
				var selIndex = mui.getProto().lastIndex;
				var opt = mui.getProto();
				opt.removeImage(selIndex, "1");
				comments.photos.splice(selIndex, 1)
			}, false);
			//压缩
			function compressImage(img, index) {
				console.log(img)
				plus.zip.compressImage({
						src: img,
						dst: img.slice(0, img.length - 4) + "zip" + (img.slice(-4)),
						quality: 100,
						overwrite: true
					},
					function(i) {
						comments.filesZip.push({
							name: "photos" + (index + 1),
							path: i.target
						})
					},
					function(e) {
						alert("压缩图片失败: " + JSON.stringify(e));
					});
			}
		</script>
	</body>

</html>